<template>
	<view class="content">
		<view class="m_content">
			<view class="m_contents">
				<view class="m_fan">
					<image src="/static/返回.png" mode="" class="m_img" @click="fan()"></image>
				</view>
				<view class="m_c_top flex">
					<h4>省钱会员</h4>
					<h6>兑奖码兑换</h6>
				</view><!--省钱头部-->
				<view class="m_c_list">
					<ul>
						<li v-for="(item,index) in list" :key="index"  v-if="isActive==index">{{item.title}}<text>{{item.money}}</text></li>
					</ul>
				</view><!--省钱一-->
				<view class="m_c_num">
					<h1 v-for="(item,index) in allnum" :key="index"  v-if="isActive==index">{{item.title}}</h1>
				</view><!--省钱二-->
				<view class="m_c_sw">
					<ul class="m_money"> 
					  <li  v-for="(item,index) in lists" :key="index" class="m_moneys" v-if="isActive==index">
						<ul class="flex">
							<li v-for="(items,indexs) in item.article" class="m_moneys_li">
								<h2>{{items.text1}}</h2>
								<h4>{{items.text2}}</h4>
							</li>
						</ul>
					  </li>	
					</ul>
				</view><!--省钱三-->
				<view class="kai">
					<text></text>开卡再享<text></text>
				</view><!--开卡再享-->
				<view class="m_zhuan">
					<ul class="m_zhuan_ul flex">
						<li v-for="(item,index) in zhuan" :key="index" class=" flex zhuan_li" >
							<view class="zhuan_left">
								<image :src="item.src" mode="" class="m_img"></image>
							</view>
							<view class="zhuan_right">
								<h3>{{item.title}}</h3>
								<p>{{item.title1}}</p>
							</view>
						</li>
					</ul>
				</view><!--专属客服-->
				<b></b>
				<view class="nav">
					<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
					<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
						<view class="tab-scroll_box">
							<!-- 选项卡类别列表 -->
							<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==index}" @click="chenked(index)">
									<view class="category_title_one">{{item.text1}}</view>
									<view class="category_title_two">{{item.num}}</view>
									<view class="category_title_three">{{item.text2}}</view>
							</view>
						</view>
					</scroll-view>
				</view><!--滑动-->
				<view class="m_bottom" >
					<ul>
						<li v-for="(item,index) in lists_s" :key="index" class="lists_s_li flex" v-if="isActive==index">
							<view class="m_bottom_left">
						        {{item.text1}}
					        </view>
					       <view class="m_bottom_right">
						      {{item.text2}}
					       </view>
						</li>
					</ul>
					
				</view><!--底部-->
				<view class="m_b">
					开通即视为同意<text>《会员服务协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default{
		
		data(){
			return{
				allnum:[
					{id:'1',title:'48元省钱红包'},
					{id:'2',title:'144元省钱红包'},
					{id:'3',title:'288元省钱红包'},
					{id:'4',title:'576元省钱红包'}
				],
				list:[
					{id:'1',title:'开通团油省钱会员每月可省',money:'￥48'},
					{id:'2',title:'开通团油省钱会员每月可省',money:'￥144'},
					{id:'3',title:'开通团油省钱会员每月可省',money:'￥288'},
					{id:'4',title:'开通团油省钱会员每月可省',money:'￥576'}
				],
				lists:[
					{
						id:'1',
						article:[
							{text1:'16元',text2:'满188可用'},
							{text1:'16元',text2:'满188可用'},
							{text1:'16元',text2:'满188可用'}
						]
					},
					{
						id:'2',
						article:[
							{text1:'16元×3张',text2:'满188可用'},
							{text1:'16元×3张',text2:'满188可用'},
							{text1:'16元×3张',text2:'满188可用'}
						]
					},
					{
						id:'3',
						article:[
							{text1:'16元×6张',text2:'满188可用'},
							{text1:'16元×6张',text2:'满188可用'},
							{text1:'16元×6张',text2:'满188可用'}
						]
					},
					{
						id:'4',
						article:[
							{text1:'16元×12张',text2:'满188可用'},
							{text1:'16元×12张',text2:'满188可用'},
							{text1:'16元×12张',text2:'满188可用'}
						]
					}
				],
				lists_s:[
					{id:'1',text1:'￥25.9/月',text2:'立即购买，得48元红包'},
					{id:'2',text1:'￥45.9/月',text2:'立即购买，得144元红包'},
					{id:'3',text1:'￥87.9/月',text2:'立即购买，得288元红包'},
					{id:'4',text1:'￥164.9/月',text2:'立即购买，得576元红包'}
				],
				isActive: 0,
				index: 0,
				currentindex:0,
				category:[
					{id:'1',text1:'月卡',num:'￥25.9',text2:'尝鲜次次省钱'},
					{id:'2',text1:'季卡',num:'￥45.9',text2:'折合每月仅需￥15.3'},
					{id:'3',text1:'半年卡',num:'￥87.9',text2:'折合每月仅需￥14.7'},
					{id:'4',text1:'年卡',num:'￥164.9',text2:'折合每月仅需￥13.7'}
				],
				
				
				zhuan:[
					{src:'/static/images/member (1).gif',title:'会员专属抽奖',title1:'每日可抽大额加油卷等好礼'},
					{src:'/static/images/member (2).gif',title:'专属客服',title1:'帮你快速解决遇到的问题'}
				]
			}
		},
		
		methods:{
			fan:function(){
				uni.switchTab({
					url:'./mine',
					success: res => {
						console.log(11)
					},
				})
			},
			
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
			
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
						change(e){
							const {current} = e.detail;
							this.currentindex = current;
							success: res => {
								console.log(11)
							}
						},	

		}
	}
</script>

<style lang="scss">
	*{margin: 0;padding: 0;}
	$color:#ecc89d;
	$color1:#996f4a;
	$color2:#713a11;
	$border-radius:20rpx;
	.flex{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
	.m_content{background-color: #374283;overflow: auto;}
	.m_contents{width:95%;margin: 0 auto;padding-top: 50rpx;}
	.m_img{display: block;width: 60rpx;height: 60rpx;}
	//省钱头部
	.m_c_top{color:$color;margin-bottom: 40rpx;}
	.m_c_list{height: 50rpx;padding: 30rpx;background-color: $color;border-top-right-radius:$border-radius ;border-top-left-radius:$border-radius;}
	.m_c_num{text-align: center;color: $color;font-weight: 700;height: 120rpx;line-height: 120rpx;font-size:40rpx}
	.m_c_list li:nth-child(n+2),.m_c_num h1:nth-child(n+2) ,.m_money .m_moneys:nth-child(n+2) ,.lists_s_li:nth-child(n+2){display: none;}
	.m_c_list li text{color:$color2;font-weight: 600;}
	//省钱全部
	.m_c_sw{text-align: center;height: 200rpx;box-sizing: border-box;margin: 40rpx orem;}
	.m_moneys_li {width:32%;background-color: $color;height: 160rpx;padding: 32rpx;box-sizing: border-box;border-radius: $border-radius}
	.m_moneys_li h2{color: $color2;font-weight: 700;}
	.m_moneys_li h4{font-size:32rpx;line-height:70rpx;}
	//开卡再享
	.kai{font-size: 40rpx;color: $color;font-weight: bold;text-align: center}
	.kai text{display: inline-block;width:100rpx;height:8rpx;background-color: $color;vertical-align: middle;}
	.zhuan_li{width: 49%;padding: 30rpx 36rpx;background-color: #323a6d;box-sizing: border-box;border-radius: $border-radius;margin: 40rpx 0rem;}
	.zhuan_left{width: 30%;}
	.zhuan_right h3{color: $color;font-weight: bold;}
	.zhuan_right p{font-size: 0.8rem;color:#9498b2;}
	b{width:100%;height: 4rpx;background-color: #9498b2;}
	//底部
	.m_bottom{margin: 30rpx 0rpx;font-size: 30rpx}
	.m_bottom ul .lists_s_li{height:100rpx;line-height: 100rpx;width: 100%;text-align: center;}
	
	.m_bottom_left{width: 40%;background-color: $color2;border-top-left-radius: 50rpx;border-bottom-left-radius:50rpx;color: $color;font-size: 36rpx !important}
	 .m_bottom_right{width:60%;background-color: $color;border-top-right-radius: 80rpx;border-bottom-right-radius: 80rpx;color: $color2;font-weight: 700;}
	 .m_b{margin-bottom: 30rpx;text-align: center;font-size: 25rpx;color: #9498b2;}
	 .m_b text{color: $color;}
	 //滑动
	 page{height: 100%;display: flex;background-color: #FFFFFF;}
	 .content{display: flex;flex-direction: column;width: 100%;flex: 1;
	 	.nav{
			margin: 50rpx 0rpx;
	 		z-index: 99;
	 		width: 100%;
	 		align-items: center;
	 		
	 		.tab-scroll{
	 			flex: 1;
	 			overflow: hidden;
	 			box-sizing: border-box;
	 			
	 			.tab-scroll_box{
	 				display: flex;
	 				align-items: center;
	 				flex-wrap: nowrap;
	 				box-sizing: border-box;
	 				width:160rpx;	
	 				.tab-scroll_item{
	 					height: 260rpx;
	 					width:140rpx;
	 					border-radius: $border-radius;
	 					margin-right: 35rpx;
	 					flex-shrink: 0;
	 					padding: 40rpx 30rpx;
	 					font-size: 16px;
	 					background-color: #6c749b;text-align: center;
	 					color: $color;
	 					
	 				}
	 			}
	 		}
	 	}
	 	
	 }
	 .active {position: relative;font-weight: 600;background-color: $color !important;color:$color1 !important ;}
	 /* 隐藏滚动条，但依旧具备可以滚动的功能 */
	 /deep/.uni-scroll-view::-webkit-scrollbar {display: none}
	 .category_title_one{line-height: 80rpx;height: 80rpx;}
	 .category_title_two{line-height: 80rpx;line-height: 80rpx;font-weight: bold;font-size: 45rpx;padding-bottom: 50rpx;}
	 .category_title_three{font-size: 20rpx;color:  #f2f2f2 ;}			
</style>